import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 Loading...

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ:

• MyComponent ಅನ್ನು ಲೇಜಿಯಾಗಿ ಲೋಡ್ ಮಾಡಲು React.lazy ಬಳಸಲಾಗಿದೆ.
• Suspense, LazyComponent ಅನ್ನು ಸುತ್ತುವರೆದಿದೆ.
• fallback ಪ್ರೊಪ್ ಒಂದು ಫಾಲ್‌ಬ್ಯಾಕ್ UI (ಲೋಡಿಂಗ್ ಇಂಡಿಕೇಟರ್) ಅನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು MyComponent ಲೋಡ್ ಆಗುತ್ತಿರುವಾಗ ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತದೆ.

ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಇಂಪ್ಲಿಮೆಂಟ್ ಮಾಡುವುದು

ಸಸ್ಪೆನ್ಸ್ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ನಿರ್ವಹಿಸಿದರೆ, ಎರರ್ ಬೌಂಡರೀಸ್ ಎಂಬುದು ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಾಗಿದ್ದು, ಅವು ತಮ್ಮ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯಲ್ಲಿ ಎಲ್ಲಿಯಾದರೂ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ದೋಷಗಳನ್ನು ಹಿಡಿದು, ಆ ದೋಷಗಳನ್ನು ಲಾಗ್ ಮಾಡಿ, ಮತ್ತು ಇಡೀ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀ ಕ್ರ್ಯಾಶ್ ಆಗುವ ಬದಲು ಒಂದು ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತವೆ.

ಎರರ್ ಬೌಂಡರಿಗಳು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ

ಎರರ್ ಬೌಂಡರಿಗಳು ಈ ಕೆಳಗಿನ ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಕ್ಲಾಸ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಾಗಿವೆ:

• static getDerivedStateFromError(error): ಈ ಮೆಥಡ್ ಅನ್ನು ಒಂದು ಡಿಸೆಂಡೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ನಿಂದ ದೋಷವನ್ನು ಥ್ರೋ ಮಾಡಿದ ನಂತರ ಕರೆಯಲಾಗುತ್ತದೆ. ಇದು ಥ್ರೋ ಆದ ದೋಷವನ್ನು ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ಸ್ವೀಕರಿಸುತ್ತದೆ ಮತ್ತು ಸ್ಟೇಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಒಂದು ಮೌಲ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು.
• componentDidCatch(error, info): ಈ ಮೆಥಡ್ ಅನ್ನು ಒಂದು ಡಿಸೆಂಡೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ನಿಂದ ದೋಷವನ್ನು ಥ್ರೋ ಮಾಡಿದ ನಂತರ ಕರೆಯಲಾಗುತ್ತದೆ. ಇದು ದೋಷ ಮತ್ತು ಯಾವ ಕಾಂಪೊನೆಂಟ್ ದೋಷವನ್ನು ಥ್ರೋ ಮಾಡಿದೆ ಎಂಬ ಮಾಹಿತಿಯನ್ನು ಒಳಗೊಂಡಿರುವ ಒಂದು ಇನ್ಫೋ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ. Sentry ಅಥವಾ Bugsnag ನಂತಹ ಸೇವೆಗೆ ದೋಷವನ್ನು ಲಾಗ್ ಮಾಡಲು ಇದು ಸೂಕ್ತ ಸ್ಥಳವಾಗಿದೆ.

ಪ್ರಮುಖ: ಎರರ್ ಬೌಂಡರಿಗಳು ಟ್ರೀಯಲ್ಲಿ ತಮ್ಮ ಕೆಳಗಿರುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿನ ದೋಷಗಳನ್ನು ಮಾತ್ರ ಹಿಡಿಯುತ್ತವೆ. ಒಂದು ಎರರ್ ಬೌಂಡರಿ ತನ್ನೊಳಗಿನ ದೋಷವನ್ನು ಹಿಡಿಯಲು ಸಾಧ್ಯವಿಲ್ಲ.

ಉದಾಹರಣೆ: ಮೂಲಭೂತ ಎರರ್ ಬೌಂಡರಿ ಇಂಪ್ಲಿಮೆಂಟೇಶನ್

            
import React, { Component } from 'react';

class ErrorBoundary extends Component {
 constructor(props) {
 super(props);
 this.state = {
 hasError: false
 };
 }

 static getDerivedStateFromError(error) {
 // Update state so the next render will show the fallback UI.
 return {
 hasError: true
 };
 }

 componentDidCatch(error, info) {
 // You can also log the error to an error reporting service
 console.error('Caught error: ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // You can render any custom fallback UI
 return 
Something went wrong.
;
 }

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

ಎರರ್ ಬೌಂಡರಿ ಬಳಸಲು, ದೋಷವನ್ನು ಥ್ರೋ ಮಾಡಬಹುದಾದ ಯಾವುದೇ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಸುತ್ತುವರೆಯಿರಿ:

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

ಸಸ್ಪೆನ್ಸ್ ಮತ್ತು ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು

ಸಸ್ಪೆನ್ಸ್ ಮತ್ತು ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಸಂಯೋಜಿಸುವುದರಿಂದ ನಿಜವಾದ ಶಕ್ತಿ ಬರುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು ಮತ್ತು ದೋಷಗಳನ್ನು ಎರಡನ್ನೂ ಸೌಜನ್ಯಯುತವಾಗಿ ನಿರ್ವಹಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಎರರ್ ಬೌಂಡರಿಯೊಂದಿಗೆ ಸಸ್ಪೆನ್ಸ್ ಅನ್ನು ಸುತ್ತುವರೆಯುವುದು ಶಿಫಾರಸು ಮಾಡಲಾದ ಅಭ್ಯಾಸವಾಗಿದೆ. ಈ ರೀತಿಯಾಗಿ, ಲೇಜಿ-ಲೋಡ್ ಆಗುತ್ತಿರುವ ಕಾಂಪೊನೆಂಟ್ ಲೋಡ್ ಆಗಲು ವಿಫಲವಾದರೆ (ಉದಾಹರಣೆಗೆ, ನೆಟ್‌ವರ್ಕ್ ದೋಷ), ಎರರ್ ಬೌಂಡರಿ ದೋಷವನ್ನು ಹಿಡಿದು ಬಳಕೆದಾರರಿಗೆ ಸಹಾಯಕವಾದ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದು.

ಉದಾಹರಣೆ: ಸಸ್ಪೆನ್ಸ್ ಮತ್ತು ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು

            
import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 
 Loading...